<template>
  <div class="app-container">
    <dv-border-box-11 title="人脸渐变">
      <div style="padding: 60px 60px 100px;">
        <dv-decoration-10 style="width:100%;height:40px;"/>
        <h1>核心能力</h1>
        输入2-5张人脸照片，生成一段以人脸为焦点的渐变视频或GIF图，支持自定义图片播放速度、视频每秒传输帧数，可用于短视频、表情包、创意H5等应用场景，丰富静态图片的玩法。
        <el-row>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="text-align:center;margin: 20px;padding: 20px;height: 650px">
                <el-form size="small" ref="form" :model="form" :rules="rules">
                  <image-identify-oss @input="getUrlList" :limit="5"></image-identify-oss>
                  <div v-for="(item, index) in form.urls" :key="index" style="display: flex;margin: 10px">
                    <el-input :placeholder="'请输入第'+ ++index +'张图片url（上传图片和输入url二选一）'" v-model="form.urls[index-1]" class="input-with-select">
                    </el-input>
                    <el-button style="margin-left: 10px" type="success" icon="el-icon-plus" plain @click="addInput"></el-button>
                    <el-button type="danger" icon="el-icon-minus" plain @click="deleteInput"></el-button>
                  </div>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="视频高度" prop="outputHeight">
                        <el-input-number v-model="form.outputHeight" :min="128" :max="1280" label="取值[128,1280]"></el-input-number>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="视频宽度" prop="outputWidth">
                        <el-input-number v-model="form.outputWidth" :min="128" :max="1280" label="取值[128,1280]"></el-input-number>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="视频帧率" prop="fps">
                        <el-input-number v-model="form.fps" :min="1" :max="25" label="取值[1,25]"></el-input-number>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div style="margin-top: 20px">
                  <el-button type="primary" icon="el-icon-search" @click="searchMorphFace">生成</el-button>
                </div>
              </div>
            </dv-border-box-9>
          </el-col>
          <el-col :span="12">
            <dv-border-box-9>
              <div style="height: 650px;margin: 20px;padding: 20px">
                <el-collapse v-model="collapse" accordion>
                  <el-collapse-item title="生成结果" name="1">
                    <div v-show="responseData.jobId">
                      生成成功，任务执行中...任务id:{{ responseData.jobId }}
                      <div style="margin: 20px">
                        <el-button type="primary" icon="el-icon-search" @click="queryFaceMorphJob">查询</el-button>
                        <el-button icon="el-icon-close" @click="cancelFaceMorphJob">撤销</el-button>
                      </div>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="处理结果" name="2">
                    任务状态：{{ responseData2.jobStatus }}
                    <div v-if="responseData2.faceMorphOutput !== null">
                      <video :preload="preload" :height="height" :width="width" align="center" :controls="controls" :autoplay="autoplay">
                        <source :src="videoUrl" type="video/mp4"/>
                      </video>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </dv-border-box-9>
          </el-col>
        </el-row>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'
import {morphFace, queryFaceMorphJob, cancelFaceMorphJob} from "@/api/txcloud/face/facechange";

export default {
  components: {
    JsonViewer
  },
  data() {
    return {
      collapse: '0',
      form: {
        rspImgType: 'url',
        urls: ["", ""],
        fps: 10,
        outputWidth: 720,
        outputHeight: 1280,
        images: [],
      },
      responseData: {},
      responseData2: {
        faceMorphOutput: null
      },
      videoUrl: '',
      responseData3: {},
      // 表单校验
      rules: {},
      //视频播放相关
      autoplay: false, //是否自动播放
      width: "200", // 设置视频播放器的显示宽度（以像素为单位）
      height: "300", // 设置视频播放器的显示高度（以像素为单位）
      preload: "auto", //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
      controls: true,
    };
  },
  created() {
  },
  methods: {
    //生成
    searchMorphFace() {
      morphFace(this.form).then(res => {
          if (res.code === 200) {
            this.responseData = res.data
            this.collapse = '1'
            this.$modal.msgSuccess(res.msg);
          } else {
            this.$modal.msgError(res.msg);
          }
        }
      )
    },
    //查询
    queryFaceMorphJob() {
      queryFaceMorphJob(this.responseData.jobId).then(res => {
          if (res.code === 200) {
            this.responseData2 = res.data
            this.collapse = '2'
            this.$modal.msgSuccess(res.msg);
            if (this.responseData2.faceMorphOutput !== null) {
              this.videoUrl = this.responseData2.faceMorphOutput.morphUrl
              console.log(this.videoUrl)
            }
          } else {
            this.$modal.msgError(res.msg);
          }
        }
      )
    },
    //撤销
    cancelFaceMorphJob() {
      cancelFaceMorphJob(this.responseData.jobId).then(res => {
          if (res.code === 200) {
            this.responseData = res.data
            this.collapse = '1'
            this.$modal.msgSuccess(res.msg);
          } else {
            this.$modal.msgError(res.msg);
          }
        }
      )
    },
    getUrlList(val) {
      this.form.urls = val.split(',')
      console.log(this.form.urls)
    },
    addInput() {
      if (this.form.urls.length >= 5) {
        this.$modal.msgWarning("最多输入五个地址");
      } else {
        this.form.urls.push('');
      }
    },
    deleteInput() {
      if (this.form.urls.length <= 2) {
        this.$modal.msgWarning("最少输入两个地址");
      } else {
        this.form.urls.pop();
      }
    },
  }
};
</script>
<style lang="scss" scoped>
.input-with-select .el-input-group__prepend {
  background-color: #fff;

  .el-select {
    width: 10vw;
  }
}
</style>
